<template>
  <div>
    <div class="bg">
      <div class="font18 mb-10">用户面板</div>
      <div class="mb-10 flex-center">
        <div class="title">用户名：</div>
        <div class="mr-10">{{userInfo.userName||''}}</div>
        <el-button class="ml-10" @click="showModifyClick">修改密码</el-button>
      </div>
      <div class="mb-10 flex-center">
        <div class="title">金额：</div>
        <div>{{userInfo.score||0}}</div>
      </div>
      <div class="mb-10 flex-center">
        <div class="title">手机号：</div>
        <div>{{userInfo.phone||''}}</div>
      </div>
      <div class="mb-10 flex-center">
        <div class="title">当前状态：</div>
        <el-tag v-if="userInfo.type===1" type="success">启用</el-tag>
        <el-tag v-if="userInfo.type!==1" type="danger">禁用</el-tag>
      </div>
    </div>
  </div>
</template>

<script>
import {getStore} from "js-utils";
import {ORDERING_POST_MODIFY_PSW} from "@/assets/const/api";
import {getUserInfo} from "@/config/tools";

export default {
  name: "userPanel",
  mixins: [],
  components: {},
  props: {},
  data () {
    return {
    }
  },
  computed: {
    userInfo(){
      return this.$store.state.userInfo||{};
    }
  },
  watch: {},
  created() {
    this.getInfo();
  },
  mounted () {},
  methods:{
    getInfo(){
      getUserInfo().then(()=>{

      })
    },
    showModifyClick(){
      this.$prompt('请输入新密码', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
      }).then(({ value }) => {
        this.$http.post(ORDERING_POST_MODIFY_PSW,{psw:value}).then(res=>{
          if(res.code === 200){
            this.$message.success('修改成功')
          }
        })
      }).catch(() => {

      });
    }
  }
}
</script>

<style scoped lang="scss">
.bg{
  background-color: white;
  padding: 15px;
}
.title{
  display: inline-block;
  width: 80px;
  text-align: right;
}
</style>